<template>
  <div class="goodsListMore-container">
    <TopHeader />
    <div class="test">
      <p> ---------{{checkList}}</p>

      <!-- 全选 -->
      <el-checkbox :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange">全选</el-checkbox>
      <p>---------------</p>

      <!-- 单选 -->
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="(item,index) in shoppingCart"
          :label="item.commodityid"
          @change="handleCheckedCitiesChange"
          :key="index">{{item.commodity.name}}</el-checkbox>

      </el-checkbox-group>
    </div>

  </div>
</template>

<script>
//header
import TopHeader from '@/components/modules/header.vue';
//api
import { GetShoppingCatbyUseid } from '@/utils/api/api.js';
export default {
  components: {
    TopHeader,
  },
  data() {
    return {
      //全选
      checkAll: false,
      //默认选中
      isIndeterminate: false,
      //已选择
      checkList: [],
      //购物车
      shoppingCart: [],

      //清洗数据
      shoppingData: [],
    };
  },
  methods: {
    //全选
    handleCheckAllChange(val) {
      this.checkList = val
        ? (this.shoppingData = this.shoppingCart.map(item => {
            return item.commodityid;
          }))
        : [];
      this.isIndeterminate = null;
    },

    //单选操
    handleCheckedCitiesChange(val) {
      console.log(val);
      if (this.checkList.length != 0) {
        if (this.checkList.length != this.shoppingData.length) {
          this.isIndeterminate = true;
        } else {
          this.isIndeterminate = false;
          this.checkAll = true;
        }
      } else {
        this.isIndeterminate = false;
        this.checkAll = false;
        this.isIndeterminate = false;
      }
    },

    getShoppingCat() {
      GetShoppingCatbyUseid(1).then(resp => {
        this.shoppingCart = resp.msg;
        this.shoppingData = resp.msg.map(item => {
          return item.commodity.name;
        });
        console.log(this.shoppingData);
      });
    },
  },
  created() {
    this.getShoppingCat();
  },
};
</script>

<style lang="scss" scoped>
.test {
  width: 1200px;
  margin: 0 auto;
}
</style>